<!--
 * @file GPS管理面板组件
 * @description 整合其余组件 用于显示设备列表、实时监控和轨迹查询功能
 * @date 2024-04-01
 * @version 2.1.0 更新hooks依赖关系
 -->
<template>
  <view 
    class="gps-panel"
    :class="{ 'gps-panel--collapsed': !expanded }"
  >
    <view class="gps-panel__header">
      <text>GPS管理</text>
      <view class="gps-panel__collapse-btn" @click="toggleExpand">
        <text class="iconfont icon-down" :class="{ 'is-collapsed': !expanded }"></text>
      </view>
    </view>
    <view class="gps-panel__content" v-show="expanded">
      <!-- 顶部导航 -->
      <view class="nav-tabs">
        <view 
          class="nav-item" 
          :class="{ 'nav-item--active': activeTab === 'realtime' }"
          @click="switchTab('realtime')"
        >
          <text class="iconfont icon-monitor"></text>
          <text>实时监控</text>
        </view>
        <view 
          class="nav-item"
          :class="{ 'nav-item--active': activeTab === 'history' }"
          @click="switchTab('history')"
        >
          <text class="iconfont icon-track"></text>
          <text>轨迹查询</text>
        </view>
      </view>
      
      <!-- 轨迹查询面板（仅在历史轨迹模式下显示） -->
      <TrackQueryPanel 
        v-if="activeTab === 'history'"
        v-model:date="selectedDate"
        @date-change="handleDateChange"
      />
      
      <!-- 过滤条件面板 -->
      <FilterPanel
        :total="deviceStore.total"
        :online-count="deviceStore.onlineDevices.length"
        :status="currentStatus"
        :search-keyword="searchKeyword"
        @update:search-keyword="searchKeyword = $event"
        @update:status="currentStatus = $event"
        @search="handleSearch"
        @status-filter="handleStatusFilter"
      />
      
      <!-- 设备列表面板 -->
      <DevicePanel
        :device-list="deviceStore.deviceList"
        :selected-device-id="selectedDeviceId"
        @select="handleSelectDevice"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
// @ts-ignore - uni-app环境下Vue导入需要忽略类型检查
import { ref, watch, onMounted, computed } from 'vue';
import { useDeviceStore } from '@/stores/modules/device';
import type { DeviceInfo } from '@/types/track';
import { useDeviceManagement, useTrackViewer } from '@/hooks';
import { formatDate } from '@/utils/format/date';

// 导入子组件
import DevicePanel from './DevicePanel.vue';
import FilterPanel from './FilterPanel.vue';
import TrackQueryPanel from './TrackQueryPanel.vue';

// 定义组件属性
interface Props {
  expanded?: boolean;
  initialTab?: 'realtime' | 'history';
  selectedDeviceId?: string;
}

const props = withDefaults(defineProps<Props>(), {
  expanded: true,
  initialTab: 'realtime',
  selectedDeviceId: ''
});

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:expanded', value: boolean): void;
  (e: 'update:selectedDeviceId', id: string): void;
  (e: 'tab-change', tab: 'realtime' | 'history'): void;
  (e: 'date-change', date: string): void;
  (e: 'device-select', device: DeviceInfo): void;
  (e: 'search', keyword: string): void;
  (e: 'status-filter', status: number): void;
}>();

// 设备store（保留，因为模板仍需要访问）
const deviceStore = useDeviceStore();

// 使用设备管理hook
const {
  handleStatusFilter: hookHandleStatusFilter,
  handleSearch: hookHandleSearch,
  handleTabChange
} = useDeviceManagement({
  autoLoad: true
});

// 使用轨迹查看器hook - 修改为使用合并后的hook
const {
  startTime,
  endTime,
  prepareTrackQuery
} = useTrackViewer();

// 获取当前日期
const TODAY = formatDate(new Date());

// 响应式状态
const expanded = ref(props.expanded);
const activeTab = ref(props.initialTab);
const searchKeyword = ref('');
const selectedDate = ref(TODAY);
const currentStatus = ref(-1);
const selectedDeviceId = ref(props.selectedDeviceId);

// 监听props变化
watch(() => props.expanded, (newVal: boolean) => {
  expanded.value = newVal;
  emit('update:expanded', expanded.value);
});

watch(() => props.selectedDeviceId, (newVal: string) => {
  selectedDeviceId.value = newVal;
});

// 监听initialTab变化，同步到内部activeTab状态
watch(() => props.initialTab, (newVal: string) => {
  if (newVal && ['realtime', 'history'].includes(newVal)) {
    activeTab.value = newVal as 'realtime' | 'history';
  }
});

// 方法
function toggleExpand(): void {
  expanded.value = !expanded.value;
  emit('update:expanded', expanded.value);
}

function switchTab(tab: 'realtime' | 'history'): void {
  activeTab.value = tab;
  handleTabChange(tab);
  emit('tab-change', tab);
}

function handleSearch(keyword: string): void {
  hookHandleSearch(keyword);
  emit('search', keyword);
}

function handleStatusFilter(status: number): void {
  hookHandleStatusFilter(status);
  emit('status-filter', status);
}

function handleDateChange(date: string): void {
  selectedDate.value = date;
  
  // 更新轨迹查询的日期范围
  startTime.value = `${date}T00:00:00`;
  endTime.value = `${date}T23:59:59`;
  
  emit('date-change', date);
}

function handleSelectDevice(device: DeviceInfo): void {
  // 处理设备选中/取消选中
  const deviceId = device.deviceId || ''; // 如果设备ID为空字符串，表示取消选中
  selectedDeviceId.value = deviceId;
  
  // 如果在轨迹查询模式，准备轨迹查询
  if (activeTab.value === 'history') {
    prepareTrackQuery(deviceId);
  }
  
  emit('update:selectedDeviceId', deviceId);
  emit('device-select', device);
}
</script>

<style lang="scss">
.gps-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  width: 300px;
  height: 500px;
  max-height: calc(100vh - 100px);
  background-color: #00aaff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;

  &--collapsed {
    width: 40px;
    height: 40px;
    
    .gps-panel__header {
      padding: 12px 8px;
      justify-content: center;
    }
    
    .gps-panel__collapse-btn {
      transform: rotate(180deg);
    }

    text {
      display: none;
    }
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    background-color: #00aaff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .gps-panel__collapse-btn {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }

      .iconfont {
        font-size: 14px;
        color: #fff;
        transition: transform 0.3s;
        
        &.is-collapsed {
          transform: rotate(180deg);
        }
      }
    }
  }

  &__content {
    flex: 1;
    overflow: auto;
    background-color: #fff;
    height: calc(500px - 40px); // 设备面板高度减去头部高度
    display: flex;
    flex-direction: column;

    .nav-tabs {
      display: flex;
      justify-content: space-around;
      background-color: #00aaff;
      padding: 8px 16px;
      
      .nav-item {
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.8);
        padding: 8px 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &--active {
          color: #fff;
          font-weight: 500;
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #fff;
          }
        }
        
        .iconfont {
          margin-right: 8px;
          font-size: 16px;
        }

        &:hover {
          color: #fff;
        }
      }
    }
  }
}
</style> 